<template>
  <div v-if="ruleForm" class="Area">
    <el-col :span="8">
      <el-select
        v-model="ruleForm.province"
        :disabled="
          options.province && options.province.length > 0 ? false : true
        "
        placeholder="请选择省份"
        style="width: 100%;"
        @change="lookUpAndDown(ruleForm.province, 'city')"
      >
        <el-option
          v-for="item in options.province"
          :key="item.code"
          :label="item.name"
          :value="item.code"
        />
      </el-select>
    </el-col>

    <el-col :span="8">
      <el-select
        v-model="ruleForm.city"
        :disabled="options.city && options.city.length > 0 ? false : true"
        placeholder="请选择城市"
        style="width: 100%;"
        @change="lookUpAndDown(ruleForm.city, 'area')"
      >
        <el-option
          v-for="item in options.city"
          :key="item.code"
          :label="item.name"
          :value="item.code"
        />
      </el-select>
    </el-col>
    <el-col :span="8">
      <el-select
        v-model="ruleForm.area"
        :disabled="options.area && options.area.length > 0 ? false : true"
        placeholder="请选择区域"
        style="width: 100%;"
        @change="callBack"
      >
        <el-option
          v-for="item in options.area"
          :key="item.code"
          :label="item.name"
          :value="item.code"
        />
      </el-select>
    </el-col>

    <!-- <el-select
        v-if="options.GROWTH_CLASSIFY"
        v-model="ruleForm.GROWTH_CLASSIFY.cateId"
        style="width: 100%;"
        placeholder="请选择教学对象"
        @change="getStage"
      >
        <el-option
          v-for="item in options.GROWTH_CLASSIFY"
          :key="item.cateId"
          :label="item.itemName"
          :value="item.cateId"
        />
      </el-select>
      <el-select
        v-else
        v-model="ruleForm.GROWTH_CLASSIFY.cateId"
        disabled
        placeholder="请选择"
      >
        <el-option
          v-for="item in options.STAGE"
          :key="item.cateId"
          :label="item.itemName"
          :value="item.cateId"
        />
    </el-select>-->
  </div>
</template>

<script>
/** *
 list: 默认值
 * */
import { getAreaList } from '@/api/area';
export default {
  name: 'Category',
  props: ['list'],
  data () {
    return {
      options: {
        province: null,
        city: null,
        area: null
      },
      ruleForm: {
        province: this.list.province,
        city: this.list.city,
        area: this.list.area
      }
    };
  },
  computed: {},
  watch: {},
  created () {
    console.log('省市区:', this.ruleForm);
    this.init();
  },
  methods: {
    async init () {
      // 获取省份
      this.lookUpAndDown('', 'province');
      // 获取城市
      if (this.ruleForm.province) {
        this.lookUpAndDown(this.ruleForm.province, 'city');
      }
      // // 获取区域
      if (this.ruleForm.city) {
        this.lookUpAndDown(this.ruleForm.city, 'area');
      }
    },

    // 根据上级获取下级 - 省市区
    lookUpAndDown (parentCode, type) {
      getAreaList(parentCode).then(res => {
        // var items
        switch (type) {
          case 'province': // 省份
            this.options.province = res.data;
            break;
          case 'city': // 城市
            this.options.city = res.data;
            break;
          case 'area': // 区域
            this.options.area = res.data;
            break;
        }
        this.callBack();
      });
    },

    // 返回数据
    callBack () {
      this.$emit('CallBack', this.ruleForm);
    }
  }
};
</script>

<style lang="scss" scoped></style>
